<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SUOYUEの新用户注册</title>

  <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
  <link rel="stylesheet" href="../static/lib/Semantic-UI/semantic.min.css" th:href="@{/lib/Semantic-UI/semantic.min.css}">
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>

<br>
<br>
<br>
 <div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
   <div class="ur container">
     <div class="ui middle aligned center aligned grid">
       <div class="column">
         <h2 class="ui teal image header">
           <div class="content">
             立 即 注 册
           </div>
         </h2>
         <form class="ui large form" method="post" action="/register" th:action="@{/register}">
           <div class="ui segment">
             <div class="field">
               <div class="ui left icon input">
                 <i class="user icon"></i>
                 <input type="text" name="username" th:value="${user.username}" placeholder="用 户 名">
               </div>
             </div>
             <div class="field" id="cli-email">
               <div class="ui left icon input">
                 <i class="user icon"></i>
                 <input type="text" name="email" th:value="${user.email}" placeholder="邮 箱">
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="lock icon"></i>
                 <input type="password" name="password" th:value="${user.password}" placeholder="密 码">
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="lock icon"></i>
                 <input type="password" name="confirmPassword" th:value="${user.confirmPassword}" placeholder="确 认 密 码">
               </div>
             </div>
             <div class="field">
               <div class="ui labeled left icon input">
                 <i class="bullhorn icon"></i>
                 <input name="code" placeholder="验 证 码" type="text">
                 <div id="cli-btn" class="circular ui teal icon submit button">
                   <i class="icon settings"></i> 获 取 验 证 码
                 </div>
                 <!--                 <img src="/user/" onclick="document.forms['registerInfo'].submit()" title="重新发送"/>-->
               </div>
             </div>
             <button class="ui fluid large teal submit button">注   册</button>
           </div>
           <div class="ui error mini message"></div>
           <div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">邮箱或密码有误</div>
         </form>
         <div class="ui message">
           <a href="/login">登 录</a>
         </div>

       </div>
     </div>
   </div>
 </div>


<!--通用script：使用div标签或thymeleaf模板的th:block-->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/lib/Semantic-UI/semantic.min.js" th:src="@{/lib/Semantic-UI/semantic.min.js}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!--<script>-->
<!--  function cli() {-->
<!--    var clii= document.getElementsByClassName("clii"):-->
<!--    var email= document.getElementsByName("email"):-->
<!--    var code= document.getElementsByName("code"):-->

<!--    clii.disabled = true-->
<!--    console.log(clii)-->
<!--    axios({-->
<!--      method: 'get',-->
<!--      url: 'http://localhost:8080/user/registerMailCode',-->
<!--      // url: 'http:baidu.com',-->
<!--      // data: { /* POST数据 */ },-->
<!--      params: {-->
<!--        email:email.value,-->
<!--        code:code.value-->
<!--      }-->
<!--    }).then(function(res){-->
<!--      console.log(res)-->
<!--    })-->
<!--  }-->
<!--</script>-->
<script>
  $('.ui.form').form({
    fields : {
      username : {
        identifier: 'email',
        rules: [{
          type : 'email',
          prompt: '请输入正确且有效的邮箱'
        }]
      },
      password : {
        identifier: 'password',
        rules: [{
          type : 'empty',
          prompt: '密码不能为空'
          // type : 'exactLength[6]',
          // prompt: '请输入包含6位数字以上的密码'
        }]
      },
      confirmPassword : {
        identifier: 'confirmPassword',
        rules: [{
          type : 'empty',
          prompt: '再次确认密码不能为空'
        }]
      }
    }
  });

  //发送验证码事件
  // $("#cli-btn").click(function(){
  //   loadInfo();
  //   disabled : true;
  //   // $("#cli-btn").disabled
  //   console.log("xxoo");
  // });
  // function loadInfo() {
  //   $("#cli-email").load(/*[[@{/user/registerMailCode}]]*/"/user/registerMailCode",{
  //     email : $("[name='email']").val()
  //   });
  // }
</script>

</body>
</html>